Загрузка invisible reСaptcha при повторной отправке ajax

[Lutsk]

Есть форма. С видимой каптчей работает корректно. Но если использовать невидимую - первая отправка срабатывает корректно, а при повторной отправке выдает ошибку не отмеченной каптчи.
Знания JS у меня посредственные, - пробовал и grecaptcha.reset() где только можно, и grecaptcha.execute() - безрезультатно.
В общем нужна помощь в этом вопросе. Вот код JS:

(function ($) {
	$(document).ready(function () {
		$('body').on('submit', 'form[name="form_ajax"]', function () {
			var form = $(this),
				messages = $(form).find('.messages');
			$.ajax({
				type: 'POST',
				dataType: 'json',
				url: $(form).attr('action'),
				data: $(form).serializeArray(),
				beforeSend: function () {
					$(messages).hide();
					$(messages).find('.message').hide().html('');
				},
				complete: function () {
					if (typeof grecaptcha !== 'undefined' && grecaptcha && grecaptcha.reset) {
						grecaptcha.reset();
					}
				},
				success: function (response) {
					if (response.success) {
						$(messages).find('.message.success').html(response.messages.success.join('<br />')).show();
						$(form)[0].reset();
					}
					else {
						$(messages).show();
						$(messages).find('.message.error').html(response.message.replace(/\n/g, '<br />')).show();
					}
					$(messages).show();
				},
				error: function (response) {
					$(messages).find('.message.error').html(response.status + ':' + response.statusText).show();
					$(messages).show();
				}
			});

			return false;
		});
	});
})(jQuery);

[laimas]

Не по поводу вопроса, var form = $(this) - это объект jquery (это же касается и messages = $(form).find('.messages')), следовательно далее не $(form).attr('action'), а form.attr('action'), хотя проще сразу this.action

[Lutsk]

Не по поводу вопроса, var form = $(this) - это объект jquery (это же касается и messages = $(form).find('.messages')), следовательно далее не $(form).attr('action'), а form.attr('action'), хотя проще сразу this.action

Ну это не я писал код. Это я готовое решение нашел и пытаюсь довести до ума.
Уже весь инет перерыл так и не нашел ответа.

[Malleys]

Уже весь инет перерыл так и не нашел ответа.

А зачем рыть весь интернет, когда достаточно посмотреть документацию! https://developers.google.com/recaptcha/docs/verify

Уже весь инет перерыл так и не нашел ответа.

Всё таки не весь!

Уже весь инет перерыл так и не нашел ответа.

А на английском языке смотрели? А на арабском? А на мандарине? Нет? Ну тогда вы почти и не начинали рыть!

Каждый reCAPTCHA токен верен только на протяжении 2-ух минут, и может быть проверен один раз, что позволяет избежать атак. Поэтому токен следует генерировать перед отправкой формы! Если вам нужен новый токен, вы можете сгенерировать новый токен.


Т. е. вам надо при отправке формы получить токен, записать в форму, отправить её на сервер. Там произвести соответствующий запрос для проверки и в зависимости от результата произвести дальнейшую обработку данных формы.


Ваш пример... Публичный ключ замените на свой...

(function($) {
	var grecaptcha = window.grecaptcha;
	if (!grecaptcha) return alert("reCaptha not found");

	$(function() {
		$("body").on("submit", 'form[name="form_ajax"]', function() {
			var form = $(this),
				messages = $(form).find(".messages");

			$(messages).hide();
			$(messages)
				.find(".message")
				.hide()
				.html("");

			grecaptcha.ready(function() {
				grecaptcha
					.execute("6Levz6wUAAAAAJuGP_hRQKzfXUzwt6Llbk1-vL1y", {
						action: "form"
					})
					.then(function(token) {
						var tokenField = $("input[name=token]");
						if (tokenField.length === 0) {
							form.append('<input type="hidden" name="token">');
						}
						$("input[name=token]").val(token);
					})
					.then(function() {
						$.post(
							form.attr("action"),
							form.serializeArray(),
							function(response) {
								if (response.success) {
									$(messages)
										.find(".message.success")
										.html(response.messages.success.join("<br />"))
										.show();
								} else {
									$(messages).show();
									$(messages)
										.find(".message.error")
										.html(response.message.replace(/\n/g, "<br />"))
										.show();
								}
								$(messages).show();
							},
							"json"
						).fail(function(response) {
							$(messages)
								.find(".message.error")
								.html(response.status + ":" + response.statusText)
								.show();
							$(messages).show();
						});
					});
			});

			return false;
		});
	});
})(jQuery);